import React, { useState, useEffect } from "react";
import styles from "./UserProfile.module.css";
import axios from "../../axios";
import { Toast } from "antd-mobile";

interface User {
  _id: string;
  userName: string;
  img: string;
  sex: string;
  age: number;
  // Add other user properties as needed
}

interface UserProfileProps {
  userId: string;
  closeProfile: () => void;
}

const UserProfile: React.FC<UserProfileProps> = ({ userId, closeProfile }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const [isFriend, setIsFriend] = useState<boolean>(false);
  const [adding, setAdding] = useState<boolean>(false);

  // 获取用户信息API
  const getuser = async () => {
    try {
      const res = await axios.get<{ data: { user: User } }>("/zbs/user?id=" + userId);
      // console.log(res.data.data.user);
      setUser(res.data.data.user);
    } catch (error) {
      console.error("获取用户信息失败", error);
    } finally {
      setLoading(false);
    }
  };

  // 组件加载时获取用户数据
  useEffect(() => {
    setLoading(true);
    getuser();
  }, [userId]); // Added userId as dependency

  // 处理添加好友
  const handleAddFriend = () => {
    if (adding) return;

    setAdding(true);

    // 模拟添加好友请求
    // 实际项目中应替换为真实API调用
    setTimeout(() => {
      setIsFriend(true);
      Toast.show({
        icon: "success",
        content: "添加好友请求已发出",
      });
      setAdding(false);
    }, 1000);
  };

  // 加载状态显示
  if (loading) {
    return (
      <div className={styles.container}>
        <div className={styles.loading}>加载中...</div>
      </div>
    );
  }

  // 用户不存在显示
  if (!user) {
    return (
      <div className={styles.container}>
        <div className={styles.error}>用户信息不存在</div>
      </div>
    );
  }

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <button className={styles.closeBtn} onClick={closeProfile}>
          ×
        </button>
        <h2 className={styles.title}>个人资料</h2>
      </div>

      <div className={styles.profileCard}>
        {/* 头像和基础信息区域 */}
        <div className={styles.avatarSection}>
          <img src={user.img} alt="头像" className={styles.avatar} />
          <div className={styles.nameInfo}>
            <div className={styles.nickname}>{user.userName}</div>
            <div className={styles.userId}>ID: {user._id}</div>
          </div>
        </div>

        {/* 个人详细信息区域 */}
        <div className={styles.infoSection}>
          <div className={styles.infoItem}>
            <span className={styles.label}>性别:</span>
            <span className={styles.value}>{user.sex}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.label}>年龄:</span>
            <span className={styles.value}>{user.age}</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.label}>地区:</span>
            <span className={styles.value}>河北省保定市</span>
          </div>
          <div className={styles.infoItem}>
            <span className={styles.label}>签名:</span>
            <span className={styles.value}>该用户比较懒, 还没有设置签名</span>
          </div>
        </div>

        {/* 添加好友按钮区域 */}
        <div className={styles.actionButtons}>
          {!isFriend ? (
            <button
              className={styles.addFriendBtn}
              onClick={handleAddFriend}
              disabled={adding}
            >
              {adding ? "请求中..." : "添加好友"}
            </button>
          ) : (
            <button className={styles.alreadyFriendBtn}>已发送请求</button>
          )}
        </div>
      </div>
    </div>
  );
};

export default UserProfile;